<template>
  <div>
    <div class="go-find-container">
      <div class="tab-find">
        <ul>
          <li><div class="tab-text">资讯</div></li>
          <li><div class="tab-text">工具</div></li>
        </ul>
      </div>
    </div>
    <!-- 资讯 -->
    <div v-infinite-scroll="loadMore" infinite-scroll-disabled='loading' infinite-scroll-distance="5" class="health-loading">
    <div class="body" v-for="item of discover" :key="item.index" @click="getpid(item.pid)">
      <section class="left-right-layout">
        <div class="left-title">
          <p class="title">
            {{item.title}}
          </p>
          <p class="description">{{item.description}}</p>
        </div>
        <div class="right-right-img">
          <img :src="item.img" alt="">
        </div>
      </section>  
    <!-- 健康资讯 -->
    <div class="health-footer">
      <span>{{item.titleconsult}}</span>
      <div class="health-footer-list">...</div>
    </div>
      <div class="div-hr"></div>
    </div>
    </div>
    <div class="health-load"><div :class="dis?'active':''"><img src="../../public/img/product/5-121204193R0.gif" alt=""></div>{{msg}}</div>
    <!-- policy -->
    <footer-box></footer-box>
  </div>
</template>
<script>
import Footer from './footer.vue';
export default {
components:{
  FooterBox:Footer
},
  data(){
    return {
      discover:[],
      pid:[],
      dis:false,
      pno:1,
      loading:false,
      pageCount:"",
      msg:"加载中..."
    }
  },
  created() {
    this.getHealth();
  },
  methods:{
    getHealth(){
      this.$axios.get("http://localhost:5050/discover/?pno="+this.pno).then(data=>{
        this.discover =this.discover.concat(data.data.data);
        this.pageCount = data.data.pageCount;
      })
    },
    getpid(pid){
      this.pid=pid;
      sessionStorage.setItem("pid",this.pid);
      this.$router.push({path:"/home/news"});
    },
    //滚动加载更多
    loadMore() {
      if(this.pno<=parseInt(this.pageCount)+1){
      this.loading = true;
      this.pno++;
      this.dis = false;
      setTimeout(()=>{
      this.getHealth();
      this.loading = false;
      },2500);
      if(this.pno>=parseInt(this.pageCount)+1){
        this.dis = true;
        this.msg = "已经没有更多了！";
        this.loading = true;
      }
    }
}
  }
}
</script>

<style scoped>
div.tab-find{
  width: 100%;
  margin: 0 auto;
  height: 40px;
  line-height: 40px;
  position: fixed;
  z-index: 1;
  background: #ffffff;
  top:0px;
  box-shadow: 0px 0px 5px 5px #F8F8F8;
}
div.health-loading{
  margin-top:60px;
}
div.tab-find ul{
  display: flex;
  justify-content: space-around;
  list-style: none;
  padding: 0px;
}
div.tab-find ul{
  margin: 0px;
  margin-bottom: 10px;
}
section.left-right-layout{
  display: flex;
  justify-content: space-between;
  width: 95%;
  margin: 0 auto;
  margin-top:10px;
  margin-bottom: 10px;
}
section.left-right-layout div.right-right-img img{
  height: 75px;
  width: 100px;
}
div.health-footer{
  display: flex;
  justify-content: space-between;
  width: 95%;
  margin: 0 auto;
  margin-top:10px;
  margin-bottom: 10px;
}
div.health-footer{
  font-size: 14px;
}
div.left-title{
  width: 60%;
}
p.title{ 
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 900;
}
p.description{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
}
div.health-load{
  height: 90px;
  text-align: center;
  display: flex;
  justify-content: center;
  margin-top:10px;
  line-height: 30px;
}
div.health-load img{
  vertical-align: middle;
}
div.health-load div.active{
  display: none;
}
</style>
